<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>会员管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑消息</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item label="会员账户" v-if="model.id>0">
								{{model.userName}}
							</el-form-item>
							<el-form-item prop="userId" label="会员账户" v-else>
								<dt-member-select v-model="model.userId"></dt-member-select>
							</el-form-item>
							<el-form-item label="消息标题" v-if="model.id>0">
								{{model.title}}
							</el-form-item>
							<el-form-item prop="title" label="消息标题" v-else>
								<el-input v-model="model.title" placeholder="必填，128字符内"></el-input>
							</el-form-item>
							<el-form-item label="消息内容" v-if="model.id>0">
								<div v-html="$api.loadEditor(model.content)"></div>
							</el-form-item>
							<el-form-item prop="content" label="消息内容" v-else>
								<dt-editor mini v-model="model.content" placeholder="请输入内容"></dt-editor>
							</el-form-item>
							<el-form-item label="发送时间" v-if="model.id>0">
								{{model.addTime}}
							</el-form-item>
							<el-form-item label="阅读时间" v-if="model.id>0 && model.isRead>0">
								{{model.readTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm" v-if="!model.id">确认发送</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtMemberSelect from '../../../components/DtMemberSelect.vue'
	import DtEditor from '../../../components/DtEditor.vue'
	
	export default {
		components: {
			DtMemberSelect,
			DtEditor
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				activeName: 'info',//当前选项卡
				model: {
					id: 0,
					userId: null,
					userName: null,
					title: null,
					content: null,
					addTime: null,
					isRead: 0,
					readTime: null
				},
				rules: {
					title: [
						{ required: true, message: '请输入消息标题', trigger: 'blur' }
					],
					content: [
						{ required: true, message: '请输入消息内容', trigger: 'blur' }
					],
					userId: [
						{ required: true, message: '请选择接会员', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: '/admin/member/message/' + _this.id,
						loading: true,
						success(res) {
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					_this.$api.request({
						method: 'post',
						url: '/admin/member/message',
						data: _this.model,
						successMsg: '消息已发送成功',
						beforeSend() {
							_this.loading = true
						},
						success(res) {
							//重置表单
							_this.$refs['editForm'].resetFields();
						},
						complete() {
							_this.loading = false
						}
					});
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>